﻿<div>

    <h2>JavaScript 代码：</h2>
    <textarea name="dp-syntaxhighlighter" class="brush: js; highlight: []">

            $(function () {
                var opts = {
                    topMost: false, left: 100, top: 100,
                    extToolbar: true,
                    toolbar: [
                        "姓名：", { "id": "userName", "type": "textbox", "options": { "width": 80 } }, "年龄：",
                        { "id": "age", "type": "numberspinner", "options": { "width": 60, "value": 20, "min": 10, "max": 30 } },
                        {
                            "type": "button", "options": {
                                "text": "查询", "iconCls": "icon-search", "handler": function (t) {
                                    var tt = $(t), userName = tt.find("#userName").val(), age = tt.find("#age").numberspinner("getValue");
                                    $.easyui.messager.show("查询：姓名:{0},年龄:{1}".format(userName, age));
                                }
                            }
                        }
                    ],
                    method: "get",
                    url: "datagrid/datagrid-data.json",
                    idField: 'ID',
                    remoteSort: false,
                    singleSelect: false,
                    selected: [1, 2, 3],
                    frozenColumns: [[
                        { field: 'ck', checkbox: true },
                        { field: 'ID', title: 'ID', width: 80, sortable: true }
                    ]],
                    columns: [[
                        { field: 'Code', title: '编号(Code)', width: 120, sortable: true, filterable: false },
                        { field: 'Name', title: '名称(Name)', width: 140, sortable: true },
                        { field: 'Age', title: '年龄(Age)', width: 120, sortable: true, hidden: true },
                        { field: 'Height', title: '身高(Height)', width: 140, sortable: true },
                        { field: 'Weight', title: '体重(Weight)', width: 140, sortable: true },
                        { field: 'CreateDate', title: '创建日期(CreateDate)', width: 180, sortable: true },
                        { field: 'undefined', title: '测试(不存在的字段)', width: 150 }
                    ]],
                    onSelect: function (val) { $.easyui.messager.show(String(val)); }
                };

                $("#btn1").click(function () {
                    $.easyui.showGridSelector(opts);
                });

                $("#btn2").click(function () {
                    $.easyui.showGridSelector($.extend(opts, { pagination: true, pageSize: 20, }));
                });
            });

    </textarea>
    <h2>HTML 代码：</h2>
    <textarea name="dp-syntaxhighlighter" class="brush: html; highlight: []">

        <input id="btn1" type="button" value="ShowGridSelector" />
        <input id="btn2" type="button" value="ShowGridSelector width pagination" />

    </textarea>


</div>